<template>
  <v-dialog
    :model-value="visble"
    hide-overlay
    transition="dialog-bottom-transition"
    :fullscreen="fullscreenDialog"
    :max-width="maxWidth"
    content-class="dialog-content"
    @update:model-value="handleOutSide"
  >
    <v-card> 
         <v-btn class="fixed right-2 top-2" variant="text" size="x-small" aria-label="关闭弹窗按钮" icon type="primary" @click.stop="close">
           <j-icon size="15" color="#000">mdi-close</j-icon>
        </v-btn>
      <SongScore :src="src" :pdf-url="_pdfUrl"></SongScore> 
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
 
import SongScore from "@/views/PlayNew/components/SongScore.vue";
 
import { getOpfsUrl } from "@/utils/opfs";
import { ref } from "vue";
 
const visble = ref(false);

const src = ref("");
const fullscreenDialog = ref(true);
const alt = "";
const maxWidth = "100%";
const _pdfUrl = ref<string|undefined>("");

function open(imgUrl: string, pdfUrl?: string) {
  console.log("pdfUrl-->",pdfUrl)
  visble.value = true; 
  getOpfsUrl(imgUrl, { mimeType: "image/jpg" }).then((url) => {
    src.value = url;
  });
  _pdfUrl.value = pdfUrl;
}

function close() {
  visble.value = false;
  src.value = "";
}

function handleOutSide(bool: boolean) {
  console.log(bool);
  !bool && close();
}

 
defineExpose({ open, close });
</script>

<style scoped>
/* 弹窗关闭 */
.play-dialog-btn-close {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
}
/* 弹窗的图片 */
.play-dialog-img {
  transform: translateY(-50%);
  position: absolute;
  left: 0px;
  top: 50%;
}
</style>
